<template>
    <div class="bp_wapper">
        <!--表单测试 -->
        <!-- 头部工具条 -->
        <div class="nav-top">
            <div class="left">
                <div>
                    <span id="insert" @click="openLayer"><i class="layui-icon layui-icon-add-1"></i>添加</span>
                    <span id="update" @click="updated"><i class="layui-icon layui-icon-edit"></i>编辑</span>
                    <span id="delete"><i class="layui-icon layui-icon-delete"></i>删除</span>
                    <span id="detail"><i class="layui-icon layui-icon-ali-chakan"></i>查看</span>
                    <span id="applySh"><i class="layui-icon layui-icon-engine"></i>请购审核</span>
                </div>
            </div>
            <div class="right">
                <input type="text" id="keyWord" placeholder="请输入相应信息">
                <i id="searchBtn" class="layui-icon layui-icon-search"></i>
                <!-- 详细查询 -->
                <div class="layui-btn layui-btn-primary see-detail" id="detailBtn">
                    <i class="layui-icon layui-icon layui-icon-find-fill" style="margin-right: 10px;"></i><span>展开筛选</span>
                </div>
            </div>
        </div>
        <!-- 展开筛选 -->
        <div class="detail">
            <form action="" class="layui-form" id="bpForm">
                <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-lg3 layui-col-xs3 layui-col-sm3">
                        <label class="layui-form-label">请购单编号</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="apply_no" lay-verify="apply_no">
                        </div>
                    </div>
                    <div class="layui-col-lg3 layui-col-xs3 layui-col-sm3">
                        <label class="layui-form-label">请购单标题</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="apply_title" lay-verify="apply_title">
                        </div>
                    </div>
                    <div class="layui-col-lg3 layui-col-xs3 layui-col-sm3">
                        <label class="layui-form-label">请购人</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="apply_man_name">
                        </div>
                    </div>
                    <div class="layui-col-lg3 layui-col-xs3 layui-col-sm3">
                        <label class="layui-form-label">审核状态</label>
                        <div class="layui-input-block">
                            <input type="text" name="audit_state" class="layui-input" value="">
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-lg3 layui-col-xs3 layui-col-sm3">
                        <label class="layui-form-label">单据状态</label>
                        <div class="layui-input-block">
                            <select name="doc_state">
                                <option value=""></option>
                                <option value="0">请购中</option>
                                <option value="1">询价中</option>
                                <option value="2">采购中</option>
                                <option value="3">已发货</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-lg3 layui-col-xs3 layui-col-sm3">
                        <label class="layui-form-label">请购日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="insert_time" class="layui-input" value="" id="insert_time">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" id="submit">
                    <div style="text-align: center">
                        <button class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo"><i class="layui-icon layui-icon-search"></i>查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 表单内容 -->
        <div style="width:100%;min-height:750px;background-color:#eee;" class="tableFa">
            <table id="demo" lay-filter="test"></table>
             <!-- <table lay-filter="demo" cellspacing="0" cellpadding="0" border="0" class="layui-table">
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th width="20%">物料编码</th>
                        <th width="40%">物料名称</th>
                        <th width="6%">规格型号</th>
                        <th width="6%">单位</th>
                        <th width="6%">请购数量</th>
                        <th width="10%">期望交货日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th><input type="checkbox"></th>
                        <td>012140</td>
                        <td>纯白巧克力4*8</td>
                        <td>1*20盒</td>
                        <td>1111</td>
                        <td><input type="text" class="layui-input" value="20"></td>
                        <td> <input type="text" class="layui-input" id="expect_date" value="2019-2-20"></td>
                    </tr>
                </tbody>
            </table> -->

        </div>
    </div>
</template>

<script>

    export default {
        name: 'layuiTable',

        data() {
            return {
                form: {
                    checkbox: ['0', '0']
                },
                currentPage: 1,
                list:[]
            }
        },

        created(){
            // this.getTableList ()
        },

        mounted() {
            layui.use(['table','element','layer'], function(){
              var element = layui.element;
              var table = layui.table;
              var layer = layui.layer;
            //   layer.msg('你好啊')
              var index = layer.load(1);

                //第一个实例
              table.render({
                elem: '#demo',
                height: 'full-230',
                id:'idTest',
                limit:15,
                url: 'https://www.easy-mock.com/mock/5c77a3cadf6f65489b3c332d/test/', //数据接口
                page: true, //开启分页
                cols: [[ 
                    {
                        type: 'checkbox', 
                        fixed: 'left'
                    },
                    {
                        field: 'id', 
                        title: '序号', 
                        sort: true, 
                        fixed: 'left'
                    },
                    {
                        field: 'mater_name', 
                        title: '姓名'
                    },
                    {
                        field: 'primary_unit_name', 
                        title: '单位', 
                        sort: true
                    },
                    {
                        field: 'spec', 
                        title: '描述', 
                        sort: true
                    }
                ]],
                done:function(){
                    layer.close(index);
                }
            });



            })
        },
        methods: {
            updated(){
                layui.use(['table'],function(){
                    // 周期函数先注册组件在dom
                    // var element = layui.element;
                    var table = layui.table;
                    var checkStatus = table.checkStatus('idTest')
                        ,data = checkStatus.data;
                        console.log(data);
                })
            },
            currentChange (page) {
                // console.log(page)
            },
            // 获取数据
            // getTableList () {
            //     // var loading = layer.load(1)
            //     this.$axios({
            //         method:'get',
            //         url:'https://www.easy-mock.com/mock/5c77a3cadf6f65489b3c332d/test/'
            //     }).then((response) =>{          //这里使用了ES6的语法
            //         console.log(response)       //请求成功返回的数据
            //         this.list = response.data.data
            //         // layer.closeAll('loading')
            //         // 默认显示十条
            //     }).catch((error) =>{
            //         console.log(error)       //请求失败返回的数据
            //     })
            // },
            currentChange () {
                
            },
            // 测试弹窗
            openLayer () {
                console.log(111)
                layer.open({
                    type: 2,
                    area: ['1000px','400px'],
                    title: '新增页面',
                    maxmin: true, //开启最大化最小化按钮
                    content: ['https://www.baidu.com/'],
                    btn: ['确定', '关闭'],
                    yes: function (index, layero) {
                        // var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        // console.log(iframeWin);
                        layer.close(index);
                    },
                    cancel: function (index) {
                        top.layer.close(layer_window);
                    }
                })
            }

        }


    }
</script>

<style scoped>
    .checkbox {
        width: 18px;
        height: 18px;
    }
    .tableFa {
        position: relative;
    }
    .pageButton {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 48px;
        border: 1px solid #ddd;
        line-height: 25px;
        padding-left: 20px;
    }

</style>